<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="能力矩阵"
      class="preview-dialog"
    >
      <div ref="commandstats" style="height: 100%; width: 100%" />
      <div class="nengliList">
        <p v-for="item in sys_capacity" :key="item.label + '描述'">
          {{ item.label }}:{{ item.value }}
        </p>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getMatrixInfo } from "@/api/home/home";
import * as echarts from "echarts";
const headers = ref({
  Authorization: "Bearer " + getToken(),
});

const { proxy } = getCurrentInstance();
const { sys_capacity } = proxy.useDict("sys_capacity");
const fileType = ref("");
const commandstats = ref(null);
const rawData = ref([]);
const xAxis = ref([]);
const yAxis = ref([]);
const props = defineProps({
  projectId: {
    type: String,
  },
});

function getStatisticOutcomeFun() {
  const commandstatsIntance = echarts.init(commandstats.value, "macarons");
  commandstatsIntance.setOption({
    color: ["rgba(255, 145, 124, 0.9)"],
    radar: {
      // shape: 'circle',
      indicator: xAxis.value.map((item) => {
        return { name: item, max: Math.max.apply(null, yAxis.value) };
      }),
      axisName: {
        formatter: "【{value}】",
        color: "#428BD4",
      },
    },

    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        label: {
          show: true,
          formatter: function (params) {
            return params.value;
          },
        },
        data: [
          {
            value: yAxis.value,
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: "rgba(255, 145, 124, 0.1)",
                  offset: 0,
                },
                {
                  color: "rgba(255, 145, 124, 0.9)",
                  offset: 1,
                },
              ]),
            },
          },
        ],
      },
    ],
  });
  window.addEventListener("resize", () => {
    commandstatsIntance.resize();
  });
}

// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
  let params = {
    proId: props.projectId,
  };
  getMatrixInfo(params).then((res) => {
    rawData.value = res.data;
    for (let item in rawData.value) {
      xAxis.value.push(item);
      yAxis.value.push(rawData.value[item]);
    }
    getStatisticOutcomeFun();
  });
}

/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
  xAxis.value = [];
  yAxis.value = [];
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
</script>
<style lang="scss">
.preview-dialog {
  height: 90vh;
  width: 60%;
  .el-dialog__body {
    height: calc(100% - 50px);
    .nengliList {
      position: absolute;
      bottom: 30px;
      right: 30px;
      text-align: left;
      padding: 0px 20px;
      border: 1px solid #dddddd;
      border-radius: 10px;
    }
  }
}
</style>
